<template>
  <div>
    <ul class="title-nub">
      <li
        v-for="(item,index) in randlist"
        :key="index"
        @click="nubClick(index)"
        ref="lis"
        :style="{backgroundColor:index==0?'rgb(0, 183, 255, 0.7)':''}"
      >
        {{ index+1 }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "exam",
  props: {
    randlist: {
      type: Array,
      required: true,
    },
    nubClick: {
      type: Function,
      required: true,
    },
    nub: {
      type: Number,
      default: 0,
    },
    isExam: {
      type: Boolean,
      required: true,
    },
  },
  mounted() {},
  methods: {},
  watch: {
    nub: function (newVal, oldVal) {
      console.log(this.randlist[newVal].answers)
      if (!this.isExam) {
        let arr = JSON.parse(this.randlist[oldVal].answers),
          ary = this.randlist[oldVal].usersAnswers;
        if (ary.length == 0) {
          this.$refs.lis[oldVal].style.backgroundColor = "#cccccc";
        } else if (arr.length == ary.length) {
          for (let i = 0; i < ary.length; i++) {
            if (arr.indexOf(ary[i]) == -1) {
              this.$refs.lis[oldVal].style.backgroundColor = "red";
              break;
            } else {
              this.$refs.lis[oldVal].style.backgroundColor =
                "rgba(12, 253, 4, 0.822)";
            }
          }
        } else {
          this.$refs.lis[oldVal].style.backgroundColor = "red";
        }
      } else {
        for (let i = 0; i < this.randlist.length; i++) {
          this.$refs.lis[i].style.backgroundColor = "";
        }
      }

      this.$refs.lis[newVal].style.backgroundColor = "rgb(0, 183, 255, 0.7)";
    },
  },
};
</script>

<style scoped>
ul {
  list-style: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.title-nub {
  max-width: 460px;
  align-items: flex-start;
}

.title-nub > li {
  float: left;
  width: 30px;
  height: 22px;
  border-radius: 11px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  margin: 6px;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
}

.title-nub > li:hover {
  background-color: rgba(252, 248, 213, 0.753);
  color: rgb(26, 30, 252);
}
</style>